<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <!-- 搜索表单 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="菜品名称" prop="productSn">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入菜品名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- 搜索按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!--菜单-->
        <div>
          <el-container style="height: 500px; border: 1px solid #eee">
            <!-- 左边菜单 -->
            <el-aside width="200px" style="border: 1px solid #eee">
              <el-menu :default-active="activeMenu" @select="handSelect">
                <el-menu-item-group>
                  <el-menu-item index="0">全部</el-menu-item>
                  <el-menu-item v-for="item in categoryOptions" :key="item.categoryId" :index="item.categoryId">{{ item.categoryName }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-menu>
            </el-aside>
            <!-- 右边主要内容 -->
            <el-main>
              <el-row>
                <el-col v-for="item in dataList" :key="item.productId" :span="3">
                  <el-card v-if="item.productState === '在售' || item.taocanStatus === '在售'" :body-style="{ padding: '0px' }">
                    <img :src="item.url" class="image">
                    <div style="padding: 14px;">
                      <span>{{ item.productName }}</span>
                      <div class="bottom clearfix">
                        <span class="price">${{ item.price }}</span>
                        <el-button
                          v-if="activeMenu == '21'"
                          style="float: right; padding: 3px 0"
                          type="text"
                          @click="handTaocan(item)"
                        >详情</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <!-- 分页加载 -->
              <el-pagination
                :current-page="queryParams.pageNum"
                :page-sizes="[5, 10, 20, 50,100]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-main>
          </el-container>
        </div>

      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-table :data="taocanItemFixedList" style="width: 100%" border max-height="450">
        <el-table-column label="固定选项">
          <el-table-column prop="productName" label="菜名" width="180" align="center" />
          <el-table-column prop="categoryName" label="类别" width="150" align="center" />
          <el-table-column prop="quantity" label="数量" width="100" align="center" />
          <el-table-column prop="price" label="原价" align="center" />
        </el-table-column>
      </el-table>

      <el-table :data="taocanItemSelectedList" style="width: 100%" border max-height="450">
        <el-table-column :label="'可选选项（从下列选择'+ selectNum +'项）'">
          <el-table-column prop="productName" label="菜名" width="180" align="center" />
          <el-table-column prop="categoryName" label="类别" width="150" align="center" />
          <el-table-column prop="quantity" label="数量" width="100" align="center" />
          <el-table-column prop="price" label="原价" width="150" align="center" />
          <el-table-column prop="addprice" label="加价" width="150" align="center" />
        </el-table-column>
      </el-table>

    </el-dialog>

  </div>
</template>

<script>
import {
  listAll
} from '@/api/pos/category'
import {
  listProductByPage
} from '@/api/pos/product'
import {
  listTaocanByPage,
  listTaocanItem
} from '@/api/order/taocan'
export default {
  name: 'OrderMenu',
  // 定义属性
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        productSn: null,
        productName: null,
        categoryId: null
      },
      // 总条数
      total: 0,
      // 下拉框选项数据
      categoryOptions: [],
      // 菜单数据
      dataList: [],
      // 菜单选项索引
      activeMenu: '0',
      title: '',
      open: false,
      taocanItemFixedList: [],
      taocanItemSelectedList: [],
      selectNum: null
    }
  },
  // 计算属性，可选
  computed: {},
  // 监控data变化，可选
  watch: {},
  // 生命周期-创建完成，可选
  created() {
    this.getCategoryOptions()
    this.getList()
  },
  // 生命周期-挂载完成，可选
  mounted() {},

  // 方法集合
  methods: {
    /** 查询下拉列表选型 */
    getCategoryOptions() {
      // 访问后端接口，查外键所有对象
      // 结果赋值this.categoryOptions
      listAll().then(response => {
        this.categoryOptions = response.data
      })
    },

    /** 查询数据列表 */
    getList() {
      this.loading = true
      // 结果赋值this.dataList
      listProductByPage(this.queryParams).then(response => {
        this.dataList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    getTaocan() {
      this.loading = true
      // 结果赋值this.dataList
      const querydata = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      }
      listTaocanByPage(querydata).then(response => {
        this.dataList = response.data.list
        this.dataList.forEach((item) => {
          item.productName = item.taocanName
          item.price = item.taocanPrice
          item.url = 'http://43.138.211.217:9000/misp-minio/taocan.jpg'
        })
        this.total = response.data.total
        this.loading = false
        this.activeName = '21'
      })
    },

    /** 菜单选项获取相应的数据 **/
    handSelect(index) {
      this.activeMenu = index
      if (index === '0') {
        this.queryParams.categoryId = null
      } else if (index === 21) {
        this.queryParams.categoryId = null
        this.getTaocan()
      } else {
        this.queryParams.categoryId = index
        this.getList()
      }
    },

    // 点击查看套餐内容
    handTaocan(data) {
      const querydata = {
        taocanSn: data.taocanSn
      }
      listTaocanItem(querydata).then(response => {
        this.taocanItemFixedList = []
        this.taocanItemSelectedList = []
        this.title = '套餐内容'
        this.open = true
        response.data.forEach((item) => {
          if (item.taocanType === 1) {
            this.taocanItemFixedList.push(item)
          } else {
            this.taocanItemSelectedList.push(item)
          }
        })
        this.selectNum = this.taocanItemSelectedList[0].highestOption
        console.log(response)
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.activeMenu = this.dataList[0].categoryId
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.getList()
    },

    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }

  }
}
</script>
<style scoped lang="scss">
  .el-aside,
  .el-main,
  .el-menu {
   background: #fafafa
  }

  .el-card {
    margin: 10px;
  }

  .price {
    color: blue;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height:100px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
